<script setup lang="ts">
import userDetailStore from "@/store/mod/hospitalDetail.ts";
import {ref} from 'vue'
import {useRouter,useRoute} from "vue-router";
// import useUserStore from "@/store/mod/user.ts";
// let userStore = useUserStore()
const $router = useRouter()
const $route = useRoute()
//医院的一些数据放到了pinia里啦，。这里引入
let hospitalStore = userDetailStore()
let currentIndex = ref<number>(0)

/**
 * 滚动效果
 * @param index
 */
function changeIndex(index:number){
  currentIndex.value=index
  let tits=document.querySelectorAll('.titles')
  tits[index].scrollIntoView({
    behavior:'smooth', //多度动画效果
    block:'start'
  });
}
/**
 * 点击具体科室触发
 * @param item 用户选中科室的数据
 */
function showLogin(item:any){
  // userStore.visiable=!userStore.visiable
//   在此进行路由鉴权
//   console.log(item)
  $router.push({
    path:'/hospital/register_step1',
    query:{hoscode:$route.query.hoscode,depcode:item.depcode}
  })
}
</script>
<!--:src="'data:image/jpeg;base64,'+hospitalInfo.logoData"-->
<template>
<div class="register">
  <div class="top">
    <div class="title">{{hospitalStore.hospitalInfo.hospital?.hosname}}</div>
    <div class="level">
      <svg t="1690856809595" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2310" width="16" height="16"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="2311" fill="#d81e06"></path></svg>
      <span>{{hospitalStore.hospitalInfo.hospital?.param.hostypeString}}</span>
    </div>
  </div>
  <div class="content">
    <div class="l">
      <img :src="'data:image/jpeg;base64,'+hospitalStore.hospitalInfo.hospital?.logoData" alt="">
    </div>
    <div class="r">
      <div class="tit">挂号规则</div>
      <div class="time">
        预约周期：10天 &nbsp;放号时间：{{hospitalStore.hospitalInfo.bookingRule?.releaseTime}}&nbsp;停挂时间：{{hospitalStore.hospitalInfo.bookingRule?.stopTime}}
      </div>
      <div class="address">
        具体位置：{{hospitalStore.hospitalInfo.hospital?.param.fullAddress}}
      </div>
      <div class="route">
        具体路线：{{hospitalStore.hospitalInfo.hospital?.route}}
      </div>
      <div class="quitTime">
        退号时间：就诊前一工作{{hospitalStore.hospitalInfo.bookingRule?.quitTime}}取消
      </div>
      <div class="tit">
        预约规则
      </div>
      <div class="ruleInfo" v-for="(item,index) in hospitalStore.hospitalInfo.bookingRule?.rule" v-bind:key="index">
        {{item}}
      </div>
    </div>
  </div>
  <div class="department">
<!--    科室-->
    <div class="l">
      <ul>
        <li :class="{active:currentIndex===index}" @click="changeIndex(index)" v-for="(department,index) in hospitalStore.departmentArr" :key="department.depcode">{{department.depname}}</li>
      </ul>
    </div>
    <div class="r">
<!--      科室详细分类-->
      <div class="showDepartment" v-for="department in hospitalStore.departmentArr">
        <div class="titles" >
          {{department.depname}}
        </div>
        <ul>
          <li @click="showLogin(item)" v-for="item in department.children" :key="item.depcode">{{item.depname}}</li>
        </ul>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.register{
  margin: 20px 0 0 50px;
  .top{
    display: flex;
    margin-bottom: 15px;
    .title{
      font-size: 30px;
    }
    .level{
      color:#7f7f7f;
      margin-left: 10px;
      height: 40px;
      display:flex;
      padding-top: 15px;
    }
  }
  .content{
    display: flex;
    .l{
      width: 80px;
      img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
    .r{
      flex:1;
      margin-left: 20px;
      .tit{
        margin-bottom: 15px;
      }
      .time,.address,.route,.quitTime,.ruleInfo{
        color: #7f7f7f;
        margin-bottom: 8px;
        line-height: 1.2;
      }
    }
  }
  .department{
    margin-top: 30px;
    display: flex;
    height: 408px;
    .l{
      width: 100px;
      ul{
        li{
          padding: 10px 0;
          text-align: center;
          background: #f8f8f8;
          color: #7f7f7f;
          font-size: 14px;
          border-left: 2px solid #f8f8f8;
        }
        li:hover{
          cursor: pointer;
        }
      }
      .active{
        border-left: 2px solid pink;
        background: white;
        color: red;
      }
    }
    .r{
      flex: 1;
      overflow-y: scroll;
      &::-webkit-scrollbar{
        display: none;
      }
      .showDepartment{
        .titles{
          background: #f8f8f8;
          color: #7f7f7f;
          padding: 3px 0 3px 10px;
        }
        ul{
          display: flex;
          flex-wrap: wrap;
          li{
            width: 23%;
            margin: 0 5%;
            text-align: center;
            line-height: 1.8em;
            color: #7f7f7f;
          }
          li:hover{
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>